@import './reset';
@import './footer';

@function getvw($w) {
    @return calc($w / 750) * 100+vw;
}

$themColor: #ff9344;
$themWidth: getvw(710);

%Box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container {
    width: 100vw;
    @extend %Box;
    // 减去底部高度，防止内容被遮挡
    margin-bottom: getvw(135);

    header {
        width: $themWidth;

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            // background-color: bisque;

            .logo {
                width: getvw(125);
                height: getvw(125);
                margin: getvw(15) 0 getvw(10) 0;
                // background-color: aquamarine;

                img {
                    height: 100%;
                    display: block;
                }
            }

            .searchBox {
                width: getvw(265);
                height: getvw(50);
                border: getvw(2) solid $themColor;
                border-radius: getvw(50);
                overflow: hidden;
                position: relative;

                input {
                    width: 100%;
                    height: 100%;
                    background-color: transparent;
                    border: none;
                    padding: 0 getvw(30);
                    position: absolute;
                    font-size: getvw(24);
                    outline: none;
                }

                img {
                    position: absolute;
                    height: getvw(35);
                    display: block;
                    right: getvw(15);
                    top: 50%;
                    transform: translateY(-50%);
                }
            }

            .selectBox {
                position: relative;
                select {
                    width: getvw(160);
                    height: getvw(55);
                    border: getvw(2) solid $themColor;
                    font-size: getvw(26);
                    padding-left: getvw(14);
                    // 隐藏下拉框的下拉箭头
                    -webkit-appearance: none;
                }

                img {
                    position: absolute;
                    top: 50%;
                    right: getvw(11);
                    transform: translateY(-50%);
                    display: block;
                    width: getvw(30);
                    
                    pointer-events: none;
                }
            }
        }
    }

    // 轮播图
    .banner {
        width: 100%;
        background-color: skyblue;
        overflow: hidden;
        position: relative;

        ul:first-child {
            width: 500vw;
            display: flex;
            animation: ban 10s 2s ease-in-out infinite;

            li {
                img {
                    width: 100vw;
                    display: block;
                }
            }
        }

        ul:last-child {
            width: 100vw;
            height: getvw(12);
            background-color: #000000;
            opacity: 0.49;
            position: absolute;
            bottom: getvw(90);

            li {
                width: getvw(130);
                height: 100%;
                background-color: #ffffff;
                opacity: 0.8;
                margin-left: getvw(145);
            }
        }

        // 轮播图动画
        @keyframes ban {
            from {
                transform: translateX(0);
            }
            10% {
                transform: translateX(0);
            }

            30% {
                transform: translateX(-100vw);
            }
            40% {
                transform: translateX(-100vw);
            }

            60% {
                transform: translateX(-200vw);
            }
            70% {
                transform: translateX(-200vw);
            }

            90% {
                transform: translateX(-300vw);
            }
            to {
                transform: translateX(-300vw);
            }
        }
    }

    main {
        width: 100vw;
        @extend %Box;

        section {
            width: $themWidth;
            // background-color: pink;

            .con_title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: getvw(35) 0 getvw(5);

                .ct_left {
                    display: flex;
                    align-items: center;
                    font-size: getvw(30);

                    img {
                        height: getvw(55);
                        display: block;
                        margin-right: getvw(8);
                    }
                }

                .ct_right {
                    display: flex;
                    align-items: center;
                    font-size: getvw(24);

                    img {
                        display: block;
                        height: getvw(25);
                        margin-left: getvw(8);
                    }
                }
            }

            .con_discount {
                ul {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    padding: getvw(12) getvw(65) 0 getvw(60);
                    // border: 1px solid red;

                    li {
                        img {
                            display: block;
                            width: getvw(240);
                            height: getvw(95);
                        }

                        &:nth-child(n + 3){
                            margin-top: getvw(30);
                        }
                    }

                }
            }

            .con_guess {
                ul {
                    li {
                        display: flex;
                        margin: getvw(30) 0;

                        .guessLeft {
                            margin-right: getvw(10);

                            img {
                                height: getvw(165);
                                display: block;
                            }
                        }

                        .guessRight {
                            width: 100%;
                            // background-color: aquamarine;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            transform: translateX(getvw(10));

                            h3 {
                                // background-color: red;
                                font-size: getvw(30);
                                font-weight: normal;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;

                                span {
                                    font-size: getvw(22);
                                    color: #494949;
                                }
                            }

                            p:first-of-type {
                                font-size: getvw(22);
                                margin: getvw(20) 0;
                                color: #494949;
                                margin-left: getvw(10);
                            }

                            p:last-of-type {
                                font-size: getvw(32);
                                font-weight: normal;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                color: $themColor;
                                margin-left: getvw(10);

                                span {
                                    color: #494949;
                                    font-size: getvw(22);
                                }
                            }
                        }

                    }
                }
            }
        }
    }
}